import React, { useCallback, useEffect, useState, useMemo } from 'react';
import { Button, Form, message, Input, InputNumber, Row, Col, Table } from 'antd';
import {
    BankOutlined, EnvironmentOutlined, TeamOutlined, HomeOutlined, ClockCircleOutlined
} from '@ant-design/icons';
import request from '@/utils/request'
import MainTitle from '@/components/MainTitle';
import rTime from '@/utils/formateDate'
import './roomInfo.scss';
import { withSelector } from '@/utils/hoc'
const { TextArea } = Input;

function RoomInfo(props) {
    const { id: userId } = useMemo(() => (JSON.parse(localStorage.getItem('userInfo'))), [])
    const [myForm] = Form.useForm()

    const [roomId, setRoomId] = useState('');
    // 获取单个房间
    const [roomInfo, setRoomInfo] = useState({});
    const getRoomInfo = useCallback(async id => {
        const { data } = await request.get('/room/getRoomInfo', { params: { roomId: id } });
        setRoomInfo(data.data);
    }, []);
    //宿舍成员表头
    const columns = useMemo(() => [
        {
            title: '姓名',
            dataIndex: 'name',
            render: text => <a>{text}</a>
        },
        {
            title: '学号',
            dataIndex: 'account',
        },
        {
            title: '电话号',
            dataIndex: 'phone',
        },
        {
            title: '入住时间',
            dataIndex: 'createdAt',
            render: (text) => {
                return (
                    <>
                        < ClockCircleOutlined style={{ marginRight: 10 }} />
                        {
                            rTime(text)
                        }
                    </>
                )
            }
        }
    ], [])
    //获取评价
    const [evaluates, setEvaluates] = useState([]);
    const getEvaluates = useCallback(async id => {
        const { data } = await request.get('/evaluate/getEvaluates', { params: { roomId: id } });
        setEvaluates(data.data.evaluates);
    }, []);
    //发表评价
    const onFinish = useCallback(async values => {
        const { data } = await request.post('/evaluate/addEvaluate', { roomId, ...values });
        if (!data.success) {
            message.error('评论失败');
        } else {
            message.success('评论成功');
            getEvaluates(roomId);
        }
        myForm.setFieldsValue({ score: 60, note: '' });
    })
    //删除评价
    const removeEvaluate = useCallback(async e => {
        const { data } = await request.delete('/evaluate/removeEvaluate', { params: { evaluateId: e.currentTarget.getAttribute('evaluate_id') } });
        if (data.success) {
            message.success('删除成功');
            getEvaluates(roomId);
        } else {
            message.error('删除失败');
        }
    })
    //获取按钮回调
    const getInfo = useCallback((id) => {
        return () => {
            setRoomId(id);
            getRoomInfo(id);
            getEvaluates(id)
        }
    }, []);
    useEffect(() => {
        if (props.location.search) {
            setRoomId(props.location.search.split('=')[1]);
            getRoomInfo(props.location.search.split('=')[1]);
            getEvaluates(props.location.search.split('=')[1])
        }
    }, [])
    return (
        <div className="roomInfo">
            <div className="basic_information">
                <MainTitle>宿舍基础信息</MainTitle>
                <div className="info_retrieval main-card">
                    {
                        props.render(
                            {
                                date: false,
                                btn: <Button type="primary" shape="round" onClick={getInfo(props.groupId.roomId)} disabled={roomId || props.groupId.roomId ? false : true}>
                                    获取数据
                                </Button>,
                                selectNum: 3
                            }
                        )
                    }
                </div>
                <div className="info_box">
                    {
                        roomInfo.id
                            ?
                            <div className="info_list">
                                <Row gutter={40}>
                                    <Col className="gutter-row" span={6}>
                                        <div className="item">
                                            <div className="item_icon">
                                                <BankOutlined style={{ fontSize: 50, color: '#FF4D4F' }} />
                                            </div>
                                            <div className="item_txt">
                                                <div className="title">房间号</div>
                                                <span className="num">{roomInfo.number}</span>
                                            </div>
                                        </div>
                                    </Col>
                                    <Col className="gutter-row" span={6}>
                                        <div className="item">
                                            <div className="item_icon">
                                                <EnvironmentOutlined style={{ fontSize: 50, color: '#1890FF' }} />
                                            </div>
                                            <div className="item_txt">
                                                <div className="title">所在楼层</div>
                                                <span className="num">{roomInfo.floor.layer}</span>
                                            </div>
                                        </div>
                                    </Col>
                                    <Col className="gutter-row" span={6}>
                                        <div className="item">
                                            <div className="item_icon">
                                                <HomeOutlined style={{ fontSize: 50, color: '#1890FF' }} />
                                            </div>
                                            <div className="item_txt">
                                                <div className="title">宿舍楼</div>
                                                <span className="num">{roomInfo.building.name}</span>
                                            </div>
                                        </div>
                                    </Col>
                                    <Col className="gutter-row" span={6}>
                                        <div className="item">
                                            <div className="item_icon">
                                                <TeamOutlined style={{ fontSize: 50, color: '#52C41A' }} />
                                            </div>
                                            <div className="item_txt">
                                                <div className="title">宿舍最大人数</div>
                                                <span className="num">{roomInfo.peopleNum}</span>
                                            </div>
                                        </div>
                                    </Col>
                                </Row>
                            </div>
                            :
                            <div className="main-card no_data">
                                = 请选择宿舍 =
                            </div>
                    }
                </div>
            </div>
            <div className="dormitory_members">
                <MainTitle>宿舍成员</MainTitle>
                <div className="members_box main-card">
                    <Table
                        dataSource={roomInfo.users}
                        pagination={false}
                        rowKey='id'
                        columns={columns}
                    />
                </div>
            </div>
            <div className="dormitory_evaluation">
                <MainTitle>宿舍评价</MainTitle>
                <div className="publish_evaluation main-card">
                    <Form
                        form={myForm}
                        name="basic"
                        labelCol={{ span: 2 }}
                        wrapperCol={{ span: 22 }}
                        onFinish={onFinish}
                        initialValues={{ score: 60, note: '' }}
                    >

                        <Form.Item
                            label="宿舍评价"
                            name="note"
                            rules={[{ required: true, message: '请输入评价' }]}
                            colon={false}
                        >
                            <TextArea />
                        </Form.Item>
                        <Form.Item
                            label="评分"
                            name="score"
                            rules={[{ required: true }]}
                            colon={false}
                        >
                            <InputNumber min={0} max={100} size="large" style={{ width: 200 }} />
                        </Form.Item>
                        <Form.Item wrapperCol={{ offset: 22, span: 2 }}>
                            <Button type="primary" htmlType="submit" size="large" disabled={roomId || props.groupId.roomId ? false : true}>
                                发表评分
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <div className="evaluations_box">
                    {
                        evaluates.length ?
                            <div className="site-card-wrapper">
                                <Row gutter={30}>
                                    {
                                        evaluates.map(item => {
                                            return (
                                                <Col span={8} key={item.id}>
                                                    <div className="item">
                                                        <div className="top" style={item.score < 60 ? { background: 'rgb(255, 73, 73)' } : (item.score >= 60 && item.score <= 80 ? { background: 'rgb(255, 186, 0)' } : { background: 'rgb(24, 144, 255)' })}>
                                                            <div className="score">
                                                                评价分数：
                                                                <span>{item.score}</span>
                                                            </div>
                                                            <div className="level">
                                                                {
                                                                    item.score < 60 ? '差劲' : (item.score >= 60 && item.score <= 80 ? '良好' : '优秀')
                                                                }
                                                            </div>
                                                        </div>
                                                        <div className="center">
                                                            评价：{item.note}
                                                        </div>
                                                        <div className="bottom">
                                                            <div className="creator">
                                                                <span style={{ marginRight: 10 }}>评价人：{item.userName}</span>
                                                                {
                                                                    userId !== item.userId ?
                                                                        <Button type="primary" danger size="small" disabled>无权删除</Button>
                                                                        :
                                                                        <Button type="primary" danger size="small" onClick={removeEvaluate} evaluate_id={item.id}>删除</Button>
                                                                }

                                                            </div>
                                                            <div className="time">{rTime(item.createdAt)}</div>
                                                        </div>
                                                    </div>
                                                </Col>
                                            )
                                        })
                                    }
                                </Row>
                            </div>
                            :
                            <div className="main-card no_data" style={{ marginBottom: 40 }}>
                                = 暂无评价 =
                            </div>
                    }
                </div>
            </div>
        </div >
    )
}
export default withSelector(RoomInfo)